<template>
	<view class="content">
		<view class="cell_group">
			<view class="cell">
				<view class="cell_l">
					<text>头像</text>
				</view>
				<view class="cell_r">
					<u-image
					  :src="userInfo.avatar ? userInfo.avatar : '/static/avatar.png'"
					  width="130rpx"
					  height="130rpx"
					></u-image>
				</view>
			</view>
			<view class="cell">
				<view class="cell_l">
					<text>昵称</text>
				</view>
				
				<view class="cell_r" >
					<text v-if="userInfo.userName">{{userInfo.userName}}</text>
					<input v-else type="nickname" v-model="userName" class="inputCla" @change="getUserProfile" />
				</view>
			</view>
			<view class="cell">
				<view class="cell_l">
					<text>联系人姓名</text>
				</view>
				<view class="cell_r">
					<text >{{userInfo.nickName}}</text>
				</view>
			</view>
			 <view class="cell">
				<view class="cell_l">
					<text>手机号</text>
				</view>
				<view class="cell_r">
					<text >{{userInfo.phonenumber}}</text>
				</view>
			</view>
			
		</view>
<!-- 		<view class="btn u-font-30" @click="saveFn">
			保存修改
		</view> -->
	</view>
</template>

<script>
	
	import { updateNickName } from "@/api";
	import { getToken } from "@/utils/auth";
	export default {
		data() {
			return {
				user_info:{},
				userName:'点击获取昵称',
			}
		},
		computed: {
		  isLogin() {
		    return this.$store.state.isLogin;
		  },
		  userInfo() {
		    return this.$store.state.userInfo;
		  },
		},
		onShow() {
		  if (getToken()) {
		    this.$store.dispatch("userInfo");
		  }
		},
		methods: {
			 getUserProfile() {
			   if(this.userName != '点击获取昵称'){
				   updateNickName({
					openId:this.userInfo.openid,
					nickName:this.userName
				   }).then(res=>{
				   		this.$toast("成功");
						this.$store.dispatch("userInfo");
				   })
			   }
			 //  wx.getUserProfile({
				// desc: '用于完善资料', // 声明获取用户个人信息后的用途
				// success: (res) => {
				//   console.log(res.userInfo); // 输出用户的昵称
				//   // 可以在这里将昵称存储到本地或发送到服务器等操作
				//   // updateNickName({
				// 	 //  id:this.userInfo.userId,
				// 	 //  nickName:res.userInfo.nickName
				//   // }).then(res=>{
				// 	 //  this.$toast("成功");
				//   // })
				// },
				// fail: (err) => {
				//   console.error('获取用户信息失败', err);
				// }
			 //  });
			}
		}
	}
</script>

<style  lang="less" scoped>
	page{
		background: #F6F6F6;
	}
	.content{
		display: flex;
		flex-direction: column;
	}
	.btn{
		position: fixed;
		width: 630rpx;
		bottom: 50rpx;
		height: 90rpx;
		margin-left: 60rpx;
		border-radius: 45rpx;
		line-height: 90rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(90deg, #F15507 0%, #FFA404 100%);
		}
	.h3{
		display: flex;
		padding: 0 30rpx;
		height: 100rpx;
		font-size: 28rpx;
		align-items: center;
	}
	.cell_group{
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background: #FFFFFF;
		margin: 30rpx;
	}
	.cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		// min-height: 90rpx;
		padding: 30rpx;
		&:last-of-type{
			border: none;
			padding-bottom: 0;
		}
	}
	.cell_l{
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.cell_r{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #717171;
		input{
			font-size: 26rpx;
			color: #717171;
			text-align: right;
		}
	}
	.cell_btn1{
		display: flex;
		padding: 6rpx 20rpx;
		border: 1px solid #EEEEEE;
		border-radius: 4rpx;
	}
</style>
